// NewWord 官网交互脚本

document.addEventListener('DOMContentLoaded', function() {
    // 导航栏滚动效果
    initNavbarScroll();
    
    // 移动端导航切换
    initMobileNav();
    
    // 平滑滚动
    initSmoothScroll();
    
    // 动画观察器
    initScrollAnimations();
    
    // 单词卡片交互
    initWordCardInteraction();
    
    // AI 功能演示
    initAIDemo();
    
    // 思维导图动画
    initMindMapAnimation();
    
    // 按钮点击效果
    initButtonEffects();
});

// 导航栏滚动效果
function initNavbarScroll() {
    const navbar = document.querySelector('.navbar');
    let lastScrollY = window.scrollY;
    
    window.addEventListener('scroll', () => {
        const currentScrollY = window.scrollY;
        
        if (currentScrollY > 100) {
            navbar.style.background = 'rgba(15, 22, 16, 0.98)';
            navbar.style.backdropFilter = 'blur(25px)';
        } else {
            navbar.style.background = 'rgba(15, 22, 16, 0.95)';
            navbar.style.backdropFilter = 'blur(20px)';
        }
        
        // 隐藏/显示导航栏
        if (currentScrollY > lastScrollY && currentScrollY > 200) {
            navbar.style.transform = 'translateY(-100%)';
        } else {
            navbar.style.transform = 'translateY(0)';
        }
        
        lastScrollY = currentScrollY;
    });
}

// 移动端导航切换
function initMobileNav() {
    const navToggle = document.querySelector('.nav-toggle');
    const navMenu = document.querySelector('.nav-menu');
    
    if (navToggle && navMenu) {
        navToggle.addEventListener('click', () => {
            navMenu.classList.toggle('active');
            navToggle.classList.toggle('active');
        });
        
        // 点击菜单项时关闭菜单
        document.querySelectorAll('.nav-menu a').forEach(link => {
            link.addEventListener('click', () => {
                navMenu.classList.remove('active');
                navToggle.classList.remove('active');
            });
        });
    }
}

// 平滑滚动
function initSmoothScroll() {
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                const offsetTop = target.offsetTop - 80;
                window.scrollTo({
                    top: offsetTop,
                    behavior: 'smooth'
                });
            }
        });
    });
}

// 滚动动画观察器
function initScrollAnimations() {
    const observerOptions = {
        threshold: 0.1,
        rootMargin: '0px 0px -50px 0px'
    };
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('animate-in');
            }
        });
    }, observerOptions);
    
    // 观察需要动画的元素
    document.querySelectorAll('.feature-card, .method, .ai-feature, .contact-item').forEach(el => {
        el.style.opacity = '0';
        el.style.transform = 'translateY(30px)';
        el.style.transition = 'all 0.6s cubic-bezier(0.23, 1, 0.32, 1)';
        observer.observe(el);
    });
    
    // 添加动画样式
    const style = document.createElement('style');
    style.textContent = `
        .animate-in {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }
    `;
    document.head.appendChild(style);
}

// 单词卡片交互
function initWordCardInteraction() {
    const wordCard = document.querySelector('.word-card');
    if (wordCard) {
        // 鼠标跟随效果
        wordCard.addEventListener('mousemove', (e) => {
            const rect = wordCard.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            
            const centerX = rect.width / 2;
            const centerY = rect.height / 2;
            
            const rotateX = (y - centerY) / 10;
            const rotateY = (centerX - x) / 10;
            
            wordCard.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.05)`;
        });
        
        wordCard.addEventListener('mouseleave', () => {
            wordCard.style.transform = 'rotate(-5deg) scale(1)';
        });
        
        // 点击切换单词
        const words = [
            {
                word: 'Inspire',
                phonetic: '/ɪnˈspaɪər/',
                meaning: '启发，激励',
                insight: 'Think about how ideas can "breathe life" into creativity'
            },
            {
                word: 'Wisdom',
                phonetic: '/ˈwɪzdəm/',
                meaning: '智慧，睿智',
                insight: 'Consider how "wise" and "dom" (dominion) create mastery over knowledge'
            },
            {
                word: 'Growth',
                phonetic: '/ɡroʊθ/',
                meaning: '成长，发展',
                insight: 'Notice how growth requires both time and the right environment'
            },
            {
                word: 'Discover',
                phonetic: '/dɪˈskʌvər/',
                meaning: '发现，探索',
                insight: 'Think about "dis-cover" as removing the cover from hidden knowledge'
            }
        ];
        
        let currentWordIndex = 0;
        
        wordCard.addEventListener('click', () => {
            currentWordIndex = (currentWordIndex + 1) % words.length;
            const newWord = words[currentWordIndex];
            
            // 添加切换动画
            wordCard.style.transform = 'rotateY(90deg) scale(0.8)';
            
            setTimeout(() => {
                document.querySelector('.word-main').textContent = newWord.word;
                document.querySelector('.word-phonetic').textContent = newWord.phonetic;
                document.querySelector('.word-meaning').textContent = newWord.meaning;
                document.querySelector('.ai-insight p').textContent = newWord.insight;
                
                wordCard.style.transform = 'rotateY(0deg) scale(1)';
            }, 200);
        });
    }
}

// AI 功能演示
function initAIDemo() {
    const aiFeatures = document.querySelectorAll('.ai-feature');
    
    aiFeatures.forEach((feature, index) => {
        feature.addEventListener('mouseenter', () => {
            // 思维气泡动画
            if (index === 0) {
                const bubble = feature.querySelector('.thinking-bubble');
                if (bubble) {
                    bubble.style.animation = 'none';
                    bubble.offsetHeight; // 触发重排
                    bubble.style.animation = 'bubble-pulse 2s ease-in-out infinite';
                }
            }
            
            // 连接网络动画
            if (index === 1) {
                const connections = feature.querySelectorAll('.connection');
                connections.forEach((conn, i) => {
                    conn.style.animation = `connection-glow 1.5s ease-in-out ${i * 0.2}s infinite`;
                });
            }
            
            // 成长图表动画
            if (index === 2) {
                const bars = feature.querySelectorAll('.chart-bar');
                bars.forEach((bar, i) => {
                    bar.style.animation = `grow 1s ease-out ${i * 0.1}s forwards, bar-glow 2s ease-in-out ${i * 0.1}s infinite`;
                });
            }
        });
    });
    
    // 添加动画样式
    const aiAnimationStyle = document.createElement('style');
    aiAnimationStyle.textContent = `
        @keyframes bubble-pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
        
        @keyframes connection-glow {
            0%, 100% { opacity: 0.6; box-shadow: none; }
            50% { opacity: 1; box-shadow: 0 0 10px currentColor; }
        }
        
        @keyframes bar-glow {
            0%, 100% { box-shadow: none; }
            50% { box-shadow: 0 0 20px rgba(74, 144, 226, 0.5); }
        }
    `;
    document.head.appendChild(aiAnimationStyle);
}

// 思维导图动画
function initMindMapAnimation() {
    const mindMap = document.querySelector('.mind-map');
    if (mindMap) {
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    // 为每个节点添加延迟动画
                    const nodes = mindMap.querySelectorAll('.node');
                    nodes.forEach((node, index) => {
                        setTimeout(() => {
                            node.style.animation = 'node-appear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards';
                        }, index * 200);
                    });
                    
                    // 中心词动画
                    const centralWord = mindMap.querySelector('.central-word');
                    centralWord.style.animation = 'central-glow 3s ease-in-out infinite';
                }
            });
        }, { threshold: 0.5 });
        
        observer.observe(mindMap);
        
        // 添加思维导图动画样式
        const mindMapStyle = document.createElement('style');
        mindMapStyle.textContent = `
            @keyframes node-appear {
                from {
                    opacity: 0;
                    transform: scale(0.5) translateY(-20px);
                }
                to {
                    opacity: 1;
                    transform: scale(1) translateY(0);
                }
            }
            
            @keyframes central-glow {
                0%, 100% { box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3); }
                50% { box-shadow: 0 15px 40px rgba(212, 175, 55, 0.5); }
            }
        `;
        document.head.appendChild(mindMapStyle);
    }
}

// 按钮点击效果
function initButtonEffects() {
    const buttons = document.querySelectorAll('.btn-primary, .btn-secondary');
    
    buttons.forEach(button => {
        button.addEventListener('click', (e) => {
            // 涟漪效果
            const ripple = document.createElement('span');
            const rect = button.getBoundingClientRect();
            const size = Math.max(rect.width, rect.height);
            const x = e.clientX - rect.left - size / 2;
            const y = e.clientY - rect.top - size / 2;
            
            ripple.style.cssText = `
                position: absolute;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.6);
                transform: scale(0);
                animation: ripple 0.6s linear;
                width: ${size}px;
                height: ${size}px;
                left: ${x}px;
                top: ${y}px;
                pointer-events: none;
            `;
            
            button.style.position = 'relative';
            button.style.overflow = 'hidden';
            button.appendChild(ripple);
            
            setTimeout(() => {
                ripple.remove();
            }, 600);
            
            // 简单的交互反馈
            if (button.textContent.includes('开始学习') || button.textContent.includes('免费注册')) {
                showNotification('功能即将上线，敬请期待！');
            }
        });
    });
    
    // 添加涟漪动画
    const rippleStyle = document.createElement('style');
    rippleStyle.textContent = `
        @keyframes ripple {
            to {
                transform: scale(2);
                opacity: 0;
            }
        }
    `;
    document.head.appendChild(rippleStyle);
}

// 通知函数
function showNotification(message) {
    // 移除已存在的通知
    const existingNotification = document.querySelector('.notification');
    if (existingNotification) {
        existingNotification.remove();
    }
    
    const notification = document.createElement('div');
    notification.className = 'notification';
    notification.textContent = message;
    
    notification.style.cssText = `
        position: fixed;
        top: 100px;
        right: 20px;
        background: linear-gradient(135deg, var(--accent-gold) 0%, #f4d03f 100%);
        color: var(--primary-dark);
        padding: 1rem 1.5rem;
        border-radius: 10px;
        font-weight: 500;
        z-index: 10000;
        transform: translateX(400px);
        transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        box-shadow: 0 10px 30px rgba(212, 175, 55, 0.3);
        font-family: var(--font-sans);
    `;
    
    document.body.appendChild(notification);
    
    // 显示动画
    setTimeout(() => {
        notification.style.transform = 'translateX(0)';
    }, 100);
    
    // 自动隐藏
    setTimeout(() => {
        notification.style.transform = 'translateX(400px)';
        setTimeout(() => {
            notification.remove();
        }, 300);
    }, 3000);
}

// 浮动单词动画增强
function enhanceFloatingWords() {
    const floatingWords = document.querySelectorAll('.floating-word');
    
    floatingWords.forEach((word, index) => {
        // 鼠标悬停效果
        word.addEventListener('mouseenter', () => {
            word.style.color = 'rgba(212, 175, 55, 0.4)';
            word.style.transform = 'scale(1.2) rotate(10deg)';
            word.style.textShadow = '0 0 20px rgba(212, 175, 55, 0.6)';
        });
        
        word.addEventListener('mouseleave', () => {
            word.style.color = 'rgba(212, 175, 55, 0.1)';
            word.style.transform = 'scale(1) rotate(0deg)';
            word.style.textShadow = 'none';
        });
        
        // 随机颜色变化
        setInterval(() => {
            const colors = [
                'rgba(212, 175, 55, 0.1)',
                'rgba(74, 144, 226, 0.1)',
                'rgba(156, 174, 156, 0.1)',
                'rgba(142, 78, 198, 0.1)'
            ];
            const randomColor = colors[Math.floor(Math.random() * colors.length)];
            if (!word.matches(':hover')) {
                word.style.color = randomColor;
            }
        }, 5000 + index * 1000);
    });
}

// 页面加载完成后执行增强动画
window.addEventListener('load', () => {
    enhanceFloatingWords();
    
    // 添加页面加载动画
    document.body.style.opacity = '0';
    document.body.style.transition = 'opacity 0.5s ease-in-out';
    
    setTimeout(() => {
        document.body.style.opacity = '1';
    }, 100);
});

// 防抖函数
function debounce(func, wait) {
    let timeout;
    return function executedFunction(...args) {
        const later = () => {
            clearTimeout(timeout);
            func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
    };
}

// 节流函数
function throttle(func, limit) {
    let inThrottle;
    return function() {
        const args = arguments;
        const context = this;
        if (!inThrottle) {
            func.apply(context, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

// 性能优化：使用节流处理滚动事件
window.addEventListener('scroll', throttle(() => {
    // 这里可以添加滚动相关的性能优化逻辑
}, 16)); // ~60fps 